<template>
  <el-dialog v-model="dialogVisible" width="700px" append-to-body>
    <Title title="队伍成员列表" />
    <div class="dialog-container">
      <el-table :data="memberList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column label="姓名" align="center" width="120">
          <template #default="{ row }">
            {{ row.student?.user?.nickName || '未知' }}
          </template>
        </el-table-column>
        <el-table-column label="学号" align="center" width="140">
          <template #default="{ row }">
            {{ row.student?.stuId || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="角色" align="center" width="100">
          <template #default="{ row }">
            <el-tag :type="row.isLeader === '1' ? 'danger' : 'primary'" size="small">
              {{ row.isLeader === '1' ? '队长' : '队员' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="专业" align="center" min-width="180">
          <template #default="{ row }">
            {{ row.student?.major?.majorName || '-' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close" class="defauleButton">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import Title from '@/components/Title/index.vue'
const dialogVisible = ref(false)
const memberList = ref([])

const openDialog = (members) => {
  memberList.value = members || []
  dialogVisible.value = true
}

const close = () => {
  dialogVisible.value = false
}

defineExpose({ openDialog })
</script>
